<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="员工绩效-定制化" data-page-identification="y_auhlddz3b2">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_i5vpkrwxor 自定义模板_91za6gac5d -->
      <a-modal :body-style="bodyStyle" v-model:visible="ygState.exportScoreVisible" centered width="580px">
        <template #title>
          <span class="modal-title">导出绩效分数</span>
        </template>
        <div class="export-title">
          <div>
            <ExclamationCircleFilled style="color: #3875ff" />
          </div>
          <div class="export-content">请下载模板，并根据模板中的各组织架构调整对应的员工名称后上传，系统将根据您调整的组织架构名称和员工名称填入对应员工的绩效详情。</div>
        </div>
        <div class="tip">注意：请勿增加【列】、三行以上的空白【行】或其他【特殊标点符号】。</div>
        <div class="tip" style="margin-left: 40px">上传前对文件进行解密</div>
        <a-upload :file-list="ygState.fileList" :before-upload="handlerUpload" @remove="handleRemove" accept=".xlsx,.xls">
          <a-button type="primary">
            <upload-outlined />
            上传
          </a-button>
        </a-upload>
        <span>支持格式:.xlsx,.xls</span>
        <template #footer>
          <a-button type="ghost" @click="closeExport">取消</a-button>
          <a-button type="primary" @click="downScoreTemplate">下载模板</a-button>
          <a-button type="primary" @click="handlerUploadScore" :loading="exportLoading">导出绩效分数</a-button>
        </template>
      </a-modal>
      <!--          评分弹窗-->
      <a-modal
        :body-style="bodyStyle"
        v-model:visible="ygState.giveScoreVisible"
        centered
        destroy-on-close
        width="410px"
        :ok-button-props="{ loading: giveScordLoading }"
        @ok="handlerSubmitGiveScore"
        @cancel="cancelGiveScore"
        :after-close="resetGiveScoreForm"
      >
        <template #title>
          <span class="modal-title">{{ giveScroeType.title }}评分</span>
        </template>
        <a-form :model="giveScoreForm" ref="giveScoreRef">
          <a-form-item
            name="score"
            :label="`${giveScroeType.title}评分`"
            :label-col="{ span: 7 }"
            :rules="[
                            {
                                required: true,
                                message: '请输入分数',
                                trigger: 'blur'
                            }
                        ]"
          >
            <a-input-number placeholder="请输入分数" v-model:value="giveScoreForm.score" style="width: 100%" :min="0" />
          </a-form-item>
          <a-form-item name="detail" label="加减分备注" :label-col="{ span: 7 }" :rules="[{ required: true, message: '请输入加减分备注', trigger: 'blur' }]">
            <a-textarea :rows="3" placeholder="请输入加减分备注" v-model:value="giveScoreForm.detail" />
          </a-form-item>
        </a-form>
      </a-modal>
      <!--          评分弹窗-->
      <!--          加减分弹窗-->
      <a-modal
        :body-style="bodyStyle"
        v-model:visible="ygState.addOrReduceVisible"
        centered
        width="410px"
        destroy-on-close
        :ok-button-props="{ loading: addOrReduceLoading }"
        @ok="handlerSubmitScore"
        :after-close="resetPlusMinusForm"
      >
        <template #title>
          <span class="modal-title">{{ recordChangeType }}加减分</span>
        </template>
        <a-form :model="plusMinusPoints" ref="scoreRef">
          <a-form-item label="类型" :label-col="{ span: 7 }" name="type" :rules="{ required: true, message: '请选择加减分类型', trigger: 'blur' }">
            <a-radio-group v-model:value="plusMinusPoints.type">
              <a-radio value="加分">加分</a-radio>
              <a-radio value="减分">减分</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            name="score"
            label="分数"
            :label-col="{ span: 7 }"
            :rules="[
                            {
                                required: true,
                                pattern: new RegExp(/^(0(\.5)?|[1-9](\d*)?(\.5)?(\.0)?)$/),
                                message: '请输入大于0的数字(支持0.5的倍数)',
                                trigger: 'blur'
                            }
                        ]"
          >
            <a-input-number placeholder="请输入分数，支持以0.5为倍数的数字" v-model:value="plusMinusPoints.score" style="width: 100%" />
          </a-form-item>
          <a-form-item name="detail" label="加减分详情" :label-col="{ span: 7 }" :rules="[{ required: true, message: '请输入加减分详情', trigger: 'blur' }]">
            <a-textarea :rows="3" placeholder="请输入加减分详情" v-model:value="plusMinusPoints.detail" />
          </a-form-item>
        </a-form>
      </a-modal>
      <!--          加减分弹窗-->
      <!--          导出弹窗-->
      <div class="ygjx-div">
        <a-row :gutter="16">
          <!--                    <a-col :span="4">-->
          <!--                        <div class="left-tree">-->
          <!--                            <span class="tree-title">组织架构</span>-->
          <!--                            <a-input-search-->
          <!--                                v-model:value="ygState.searchValue"-->
          <!--                                style="margin-bottom: 8px"-->
          <!--                                placeholder="请输入"-->
          <!--                                @change="getStaffTree"-->
          <!--                            />-->
          <!--                            <a-tree-->
          <!--                                v-model:expandedKeys="ygState.expandedKeys"-->
          <!--                                v-model:selectedKeys="ygState.selectedKeys"-->
          <!--                                v-model:checkedKeys="ygState.checkedKeys"-->
          <!--                                :tree-data="ygState.treeData"-->
          <!--                                :fieldNames="{ children: 'children', title: 'name', key: 'staffInfoId' }"-->
          <!--                                @select="treeSelect"-->
          <!--                                :height="630"-->
          <!--                            />-->
          <!--                        </div>-->
          <!--                    </a-col>-->
          <a-col :span="24">
            <!--                      选择组时显示列表-->
            <div class="right-div">
              <span class="right-title">{{ ygState.dateStr }}绩效列表</span>
              <a-row class="row-size" :gutter="24">
                <a-col :span="6">
                  <a-form-item label="人员名称">
                    <a-select
                      v-model:value="ygState.filter.userName"
                      :options="ygState.peopleList"
                      show-search
                      :field-names="{ label: 'label', value: 'value' }"
                      :filter-option="
                                                (input, option) => {
                                                    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            "
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="月份筛选">
                    <a-date-picker v-model:value="ygState.filter.month" picker="month" value-format="YYYY-MM" style="width: 100%" :allowClear="false" :disabled-date="disabledDate" />
                  </a-form-item>
                </a-col>
                <a-col class="row-size" :span="6">
                  <a-space size="middle">
                    <a-button type="primary" @click="getData()">查询</a-button>
                    <a-button type="ghost" @click="resetTableData">重置</a-button>
                  </a-space>
                </a-col>
                <a-col :span="6" style="display: flex; justify-content: end" class="row-size">
                  <a-space size="middle">
                    <a-button class="ant-btn-primary" type="ghost" @click="batchAdditionAndSubtractionPoints('批量', null, '批量领导')">批量领导评分</a-button>
                    <a-button class="ant-btn-primary" type="ghost" @click="batchAdditionAndSubtractionPoints('批量', null, '批量其他')">批量其他加减分</a-button>
                    <!--                                        <a-button class="ant-btn-primary" type="ghost" @click="exportPerformanceScores"-->
                    <!--                                            >导出绩效分数</a-button-->
                    <!--                                        > -->
                    <a-button class="ant-btn-primary" type="ghost" @click="handlerUploadScore" :loading="exportLoading">导出绩效分数</a-button>
                  </a-space>
                </a-col>
              </a-row>
              <div class="yg-table">
                <a-table
                  rowKey="id"
                  bordered
                  :row-selection="{
                                        selectedRowKeys: ygState.selectedRowKeys,
                                        onChange: onSelectChange,
                                        fixed: true
                                    }"
                  :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
                  :scroll="{ y: '600px' }"
                  :columns="columns"
                  :data-source="ygState.tableData"
                  :loading="ygState.tableLoading"
                  @resizeColumn="handleTaskResizeColumn"
                  :pagination="false"
                >
                  <template #bodyCell="{ column, record, text, index }">
                    <template v-if="column.dataIndex === 'numIndex'">
                      {{ index + 1 }}
                    </template>
                    <!--                       修正手动加减分               -->
                    <template v-if="['leaderFraction', 'otherFraction'].includes(column.dataIndex)">
                      <div v-if="text > 0" class="green-num">+{{ text }}</div>
                      <div v-if="text < 0" class="red-num">{{ text }}</div>
                      <div v-if="text === 0" class="default-num">+{{ text }}</div>
                    </template>
                    <template v-if="column.dataIndex === 'behaviorFractionDescription'">
                      <a-tooltip @mouseenter="handlerGetStandard(text)" :overlay-style="tooltipStyle" placement="right">
                        <template #title>
                          <p style="margin: 0" v-for="(item, index) in behaviorFractionDescriptionList" :key="index">{{ item }}</p>
                        </template>
                        <div class="behavior-div"> {{ text }}</div>
                      </a-tooltip>
                    </template>
                    <template v-if="column.dataIndex === 'resultFractionDescription'">
                      <a-tooltip @mouseenter="handlerGetResult(text)" :overlay-style="tooltipStyle" placement="right">
                        <template #title>
                          <p style="margin: 0" v-for="(item, index) in resultFractionDescriptionList" :key="index">{{ item }}</p>
                        </template>
                        <div class="result-div"> {{ text }}</div>
                      </a-tooltip>
                    </template>
                    <!--                                      系统加减分-->
                    <template v-if="column.dataIndex === 'systemScoreChanges'">
                      <div v-if="record.systemScoreChanges > 0" class="green-num">+{{ record.systemScoreChanges }}</div>
                      <div v-if="record.systemScoreChanges < 0" class="red-num">{{
                                                record.systemScoreChanges
                      }}</div>
                      <div v-if="record.systemScoreChanges === 0" class="default-num">+{{ record.systemScoreChanges }}</div>
                    </template>
                    <template v-if="column.dataIndex === 'operate'">
                      <a-button type="link" size="small" @click="handleGiveScore(record, '上级主管')">上级主管评分</a-button>
                      <a-button type="link" size="small" @click="handleGiveScore(record, 'PMO')">PMO评分</a-button>
                      <a-button type="link" size="small" @click="batchAdditionAndSubtractionPoints('单独', record, '领导')">领导评分</a-button>
                      <a-button type="link" size="small" @click="batchAdditionAndSubtractionPoints('单独', record, '其他')">其他加减分</a-button>
                    </template>
                  </template>
                </a-table>
              </div>
            </div>
            <!--                      选择组时显示列表-->
            <!--                      选择人时显示员工绩效详情-->
            <!--                      选择人时显示员工绩效详情-->
          </a-col>
        </a-row>
      </div>
      <!-- end vid_i5vpkrwxor 自定义模板_91za6gac5d -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  onMounted(() => {
          const formattedMonth = dayjs()
          const lastMonth = dayjs().subtract(1, 'month')
          // 格式化时间为 yyyy-mm
          ygState.filter.month = lastMonth.format('YYYY-MM')
          ygState.dateStr = lastMonth.format('YYYY年MM月')

          getData()
      })
      function isCurrentMonth() {
          return dayjs(ygState.filter.month).isSame(dayjs(), 'month')
      }
      const ygState = reactive({
          expandedKeys: [],
          selectedKeys: [],
          checkedKeys: [],
          searchValue: '',
          dateStr: '',
          filter: {
              userName: '',
              month: undefined
          },
          tableLoading: false,
          treeData: [],
          selected: {},
          projectNameList: [],
          tableData: [],
          peopleList: [],
          selectedRowKeys: [],
          exportScoreVisible: false,
          addOrReduceVisible: false,
          giveScoreVisible: false,
          fileList: [],
          staffType: 'DEPARTMENT',
          isTableIn: false
      })
      const overlayStyle = {
          maxWidth: 'unset'
      }
      const plusMinusPoints = reactive({
          type: '加分',
          score: undefined,
          detail: undefined
      })
      const giveScoreForm = reactive({
          type: '加分',
          score: undefined,
          detail: undefined
      })
      const giveScroeType = ref({
          type: '',
          title: '',
          obj: {}
      })
      const columns = ref([
          { title: '序号', dataIndex: 'numIndex', align: 'center', width: 100, resizable: true },
          // {
          //     title: '部门名称',
          //     dataIndex: 'departmentName',
          //     align: 'center',
          //     ellipsis: true,
          //     width: 115,
          //     resizable: true
          // },
          { title: '人员姓名', dataIndex: 'userName', width: 100, align: 'center', ellipsis: true, resizable: true },
          // { title: '角色', dataIndex: 'js', width: 100, align: 'center', ellipsis: true, resizable: true },
          // { title: '参与项目数', dataIndex: 'projectNum', width: 105, align: 'center', ellipsis: true, resizable: true },
          // { title: '参加目标数', dataIndex: 'goalsNum', width: 105, align: 'center', ellipsis: true, resizable: true },
          {
              title: '项目结果分',
              dataIndex: 'resultFraction',
              width: 120,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '项目结果分详情',
              dataIndex: 'resultFractionDescription',
              width: 140,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: 'PPM行为分',
              dataIndex: 'behaviorFraction',
              width: 120,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: 'PPM行为分详情',
              dataIndex: 'behaviorFractionDescription',
              width: 140,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '上级主管评分',
              dataIndex: 'managerFraction',
              width: 125,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '上级主管评分备注',
              dataIndex: 'managerFractionDescription',
              width: 155,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          { title: 'PMO评分', dataIndex: 'pmoFraction', width: 120, align: 'center', ellipsis: true, resizable: true },
          {
              title: 'PMO评分备注',
              dataIndex: 'pmoFractionDescription',
              width: 140,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '领导评分',
              dataIndex: 'leaderFraction',
              width: 125,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '领导评分备注',
              dataIndex: 'leaderFractionDescription',
              width: 135,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '其他加减分',
              dataIndex: 'otherFraction',
              width: 120,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '其他加减分详情',
              dataIndex: 'otherFractionDescription',
              width: 140,
              align: 'center',
              ellipsis: true,
              resizable: true
          },
          {
              title: '合计分数',
              dataIndex: 'finalFraction',
              width: 130,
              align: 'center',
              ellipsis: true,
              resizable: true,
              fixed: 'right',
              customCell: () => {
                  return {
                      style: {
                          color: '#262626',
                          fontWeight: 'bold'
                      }
                  }
              }
          },
          { title: '操作', dataIndex: 'operate', width: 380, align: 'center', ellipsis: true, fixed: 'right' }
      ])

      watch(
          () => ygState.filter.month,
          () => {
              if (ygState.filter.month) {
                  const formattedDate = dayjs(ygState.filter.month, 'YYYY-MM').format('YYYY年MM月')
                  ygState.dateStr = formattedDate
              }
          },
          { deep: true }
      )

      function resetTableData() {
          ygState.filter.userName = ''
          const lastMonth = dayjs().subtract(1, 'month')

          // 格式化时间为 yyyy-mm
          ygState.filter.month = lastMonth.format('YYYY-MM')

          ygState.dateStr = lastMonth.format('YYYY年MM月')
          getData()
      }

      function getData() {
          get(`/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/list?userName=&month=${ygState.filter.month}`).then(
              data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  ygState.peopleList = data.data.map(item => {
                      return {
                          label: item.userName,
                          value: item.userName
                      }
                  })
              }
          )
          ygState.tableLoading = true
          get(
              `/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/list?userName=${ygState.filter.userName}&month=${ygState.filter.month}`
          )
              .then(data => {
                  if (data.code !== 200) {
                      message.error(data.message)
                      return
                  }
                  ygState.tableData = data.data
              })
              .finally(() => {
                  ygState.tableLoading = false
              })
      }
      function formatData(data) {
          return data.map(project => {
              project.taskDtoList = groupMilepostData(project.taskDtoList)
              return project
          })
      }

      // 格式化
      function groupMilepostData(data) {
          let currentProjectMilepost = ''
          return data.map((item, index) => {
              if (currentProjectMilepost !== item.projectMilepost) {
                  currentProjectMilepost = item.projectMilepost
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (currentProjectMilepost === data[i].projectMilepost) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
              } else {
                  item.rowSpan = 0
              }
              return item
          })
      }

      //
      //     筛选树接口
      function getTree() {
          post('/solution-ppm/api/v2/built-in-system-ppm/emgf/project_tree', {}).then(data => {
              if (data.code === 200) {
                  ygState.projectNameList = data.data
              } else {
                  message.error(data.message)
              }
          })
      }

      const bodyStyle = {
          paddingTop: '12px',
          paddingBottom: '15px',
          paddingLeft: '24px',
          paddingRight: '24px'
      }

      //     导出模板
      function downScoreTemplate({ url, name }) {
          post('/solution-ppm/api/v2/built-in-system-ppm/emgf/download_template', null, {
              responseType: 'blob',
              headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
              }
          }).then(res => {
              downloadExcel(res, '绩效.xlsx')
          })
      }

      function downloadExcel(response, name) {
          const blob = new Blob([response], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
          })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = name // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href)
          return href
      }

      function handlerUploadScore() {
          exportLoading.value = true
          post(
              `/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/export`,
              { month: ygState.filter.month },
              {
                  responseType: 'arraybuffer'
              }
          )
              .then(res => {
                  downloadExcel(res, '绩效分数.xlsx')
                  ygState.exportScoreVisible = false
                  ygState.fileList = []
              })
              .finally(() => {
                  exportLoading.value = false
              })
      }
      function closeExport() {
          ygState.exportScoreVisible = false
          ygState.fileList = []
      }

      function handlerUpload(file) {
          // 检查文件类型是否为 xlsx 或 xls
          if (!/\.xlsx?$/.test(file.name.toLowerCase())) {
              message.error('只能上传 xlsx 或 xls 文件')
              return false
          }

          const data = new FormData()
          data.append('file', file)

          post('/file-storage/api/v1/file/upload', data)
              .then(({ data: { fullUrl } }) => {
                  if (data) {
                      ygState.fileList = [
                          ...ygState.fileList,
                          {
                              uid: file.uid,
                              lastModified: file.lastModified,
                              name: file.name,
                              size: file.size,
                              type: file.type,
                              status: 'done',
                              url: fullUrl
                          }
                      ]
                      const fileList = ygState.fileList.map(file => ({
                          uid: file.uid,
                          lastModified: file.lastModified,
                          name: file.name,
                          size: file.size,
                          type: file.type,
                          status: file.status,
                          url: file.url
                      }))
                      console.log('调接口')
                      post('/solution-ppm/api/v2/built-in-system-ppm/emgf/upload_template', {
                          ppmEnclosureInfoList: fileList
                      }).then(data => {
                          if (data.code === 200) {
                              message.success('上传成功')
                          } else {
                              message.error(data.message)
                          }
                      })
                  }
              })
              .catch(error => {
                  // 处理文件上传失败情况
                  message.error('上传文件失败')
              })

          return false
      }

      function handleRemove(file) {
          ygState.fileList = ygState.fileList.filter(item => item.uid !== file.uid)
      }

      const scoreRef = ref(null)
      const giveScoreRef = ref(null)

      // 用法示例
      // 单个评分的id
      const recordChangesId = ref()
      // 批量评分的id数组
      const recordChangesIdList = ref([])
      const recordChangeFlag = ref('批量')
      const recordChangeType = ref('')
      const roleMap = {
          '上级主管': 'MANAGER',

          'PMO': 'PMO',

          '领导': 'LEADER',
          '批量领导': 'LEADER',

          '其他': 'OTHER',
          '批量其他': 'OTHER'
      }
      // 批量加减分
      function batchAdditionAndSubtractionPoints(flag, record, type) {
          recordChangeFlag.value = flag
          recordChangeType.value = type
          if (recordChangeFlag.value === '批量') {
              if (ygState.selectedRowKeys.length < 1) {
                  message.info('请至少选择一条数据')
              } else {
                  ygState.addOrReduceVisible = true
              }
          } else {
              if (type === '领导') {
                  plusMinusPoints.type = record.leaderFraction ? (record.leaderFraction > 0 ? '加分' : '减分') : '加分'
                  plusMinusPoints.score = Math.abs(record.leaderFraction)
                  plusMinusPoints.detail = record.leaderFractionDescription
                  ygState.addOrReduceVisible = true
                  recordChangesId.value = record.id
              } else {
                  plusMinusPoints.type = record.otherFraction ? (record.otherFraction > 0 ? '加分' : '减分') : '加分'
                  plusMinusPoints.score = Math.abs(record.otherFraction)
                  plusMinusPoints.detail = record.otherFractionDescription
                  ygState.addOrReduceVisible = true
                  recordChangesId.value = record.id
              }
          }
      }

      // 评分
      function handleGiveScore(record, flag) {
          giveScroeType.value.title = flag
          giveScoreForm.type = '加分'
          if (flag === '上级主管') {
              giveScoreForm.score = record.managerFraction
              giveScoreForm.detail = record.managerFractionDescription
          } else if (flag === 'PMO') {
              giveScoreForm.score = record.pmoFraction
              giveScoreForm.detail = record.pmoFractionDescription
          }
          ygState.giveScoreVisible = true
          recordChangesId.value = record.id
      }
      // 关闭评分
      function cancelGiveScore() {
          resetGiveScoreForm()
          ygState.giveScoreVisible = false
      }
      const addOrReduceLoading = ref(false)
      const giveScordLoading = ref(false)

      //     保存加减分
      function handlerSubmitScore() {
          scoreRef.value.validate().then(() => {
              addOrReduceLoading.value = true
              if (recordChangeFlag.value === '批量') {
                  put('/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/score_changes_batch', {
                      idList: ygState.selectedRowKeys,
                      changeType: plusMinusPoints.type,
                      changeScore: plusMinusPoints.score,
                      detail: plusMinusPoints.detail,
                      operateRole: roleMap[recordChangeType.value]
                  })
                      .then(data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              ygState.addOrReduceVisible = false
                              getData()
                          } else {
                              message.error(data.message)
                          }
                      })
                      .finally(() => {
                          addOrReduceLoading.value = false
                      })
              } else {
                  put('/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/score_changes ', {
                      id: recordChangesId.value,
                      changeType: plusMinusPoints.type,
                      changeScore: plusMinusPoints.score,
                      detail: plusMinusPoints.detail,
                      operateRole: roleMap[recordChangeType.value]
                  })
                      .then(data => {
                          if (data.code === 200) {
                              message.success('操作成功')
                              ygState.addOrReduceVisible = false
                              getData()
                          } else {
                              message.error(data.message)
                          }
                      })
                      .finally(() => {
                          addOrReduceLoading.value = false
                      })
              }
          })
      }
      //     评分保存
      function handlerSubmitGiveScore() {
          giveScoreRef.value.validate().then(() => {
              giveScordLoading.value = true
              put('/solution-ppm/api/v2/built-in-system-ppm/emgf/v2/score_changes ', {
                  id: recordChangesId.value,
                  changeType: giveScoreForm.type,
                  changeScore: giveScoreForm.score,
                  detail: giveScoreForm.detail,
                  operateRole: roleMap[giveScroeType.value.title]
              })
                  .then(data => {
                      if (data.code === 200) {
                          message.success('操作成功')
                          ygState.giveScoreVisible = false
                          getData()
                      } else {
                          message.error(data.message)
                      }
                  })
                  .finally(() => {
                      giveScordLoading.value = false
                  })
          })
      }

      // 清除表单
      function resetPlusMinusForm() {
          plusMinusPoints.type = '加分'
          plusMinusPoints.score = undefined
          plusMinusPoints.detail = undefined
      }
      // 清除表单
      function resetGiveScoreForm() {
          giveScoreForm.type = '加分'
          giveScoreForm.score = undefined
          giveScoreForm.detail = undefined
      }

      //     导出绩效分数
      function exportPerformanceScores() {
          ygState.exportScoreVisible = true
      }

      const exportLoading = ref(false)
      const disabledDate = current => {
          // 获取当前日期的年月
          const currentYearMonth = dayjs(current).format('YYYY-MM')
          // 获取今天的年月
          const todayYearMonth = dayjs().format('YYYY-MM')
          // 禁用当月及以后的月份
          return currentYearMonth > todayYearMonth
      }
      function handleTaskResizeColumn(w, col) {
          console.log(w)
          console.log(col, 'col')
          // 根据列标题来确定不同的 div
          const width = w - 10
          let div = null
          if (col.title === 'PPM行为分详情') {
              div = document.querySelectorAll('.behavior-div')
          } else if (col.title.includes('项目结果分详情')) {
              div = document.querySelectorAll('.result-div')
          } else if (col.title === '总目标') {
              div = document.querySelectorAll('.default-gant-title-total')
          } else if (col.title === '子目标') {
              div = document.querySelectorAll('.default-gant-title-zmb')
          }
          console.log(div, 'div')
          // 如果找到了对应的 div，更新其宽度
          if (div.length > 0) {
              div.forEach(item => {
                  item.style.width = `${width}px`
              })
          }
          col.width = w
      }

      const behaviorFractionDescriptionList = ref([])
      const resultFractionDescriptionList = ref([])
      // 新-模板项目审核标准格式
      function handlerGetStandard(text) {
          behaviorFractionDescriptionList.value = text?.split(/[,;；]/)
      }
      function handlerGetResult(text) {
          resultFractionDescriptionList.value = text?.split(/[,;；]/)
      }
      const onSelectChange = selectedRowKeys => {
          ygState.selectedRowKeys = selectedRowKeys
      }
      const tooltipStyle = {
          maxWidth: '600px',
          maxHeight: '600px',
          overflowY: 'auto'
      }
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .ygjx-div {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
      }

      .left-tree,
      .right-div {
          height: 100%;
          min-height: 800px;
          background-color: #fff;
      }

      .jx-detail {
          height: 100%;
          min-height: 800px;
      }

      .left-tree {
          padding: 16px 24px;
      }

      .tree-title {
          display: inline-block;
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
          margin-bottom: 12px;
      }

      .right-div {
          padding: 20px 24px;
      }

      .right-title {
          display: inline-block;
          font-size: 18px;
          color: #3875ff;
          font-weight: 600;
          margin-bottom: 12px;
      }

      .row-size {
          height: 32px;
          margin-bottom: 12px;
      }

      .ant-btn-primary {
          color: #3875ff;
          border-color: #3875ff;
      }
      .yg-table :deep(.@{ant-prefix}-table-thead) > tr {
          height: 40px;
      }

      .yg-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #3875ff;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #ffffff;
          border-bottom: 1px solid #3875ff;
          padding: 8px 16px;
      }

      .yg-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 16px;
          word-break: break-all;

          .cell-wrapper {
              padding: 0 16px;
          }
      }

      .export-title {
          width: 532px;
          height: 61px;
          background: rgba(56, 117, 255, 0.1);
          padding: 8px 16px;
          font-size: 14px;
          color: #262626;
          text-align: justify;
          line-height: 22px;
          font-weight: 400;
          display: flex;
          margin-bottom: 12px;
      }

      .export-content {
          display: inline-block;
          margin-left: 8px;
      }

      /*绩效详情*/
      .detail-top {
          height: 64px;
          border-radius: 2px;
          background-color: #fff;
          padding: 19px 24px;
          display: flex;
          margin-bottom: 16px;
          justify-content: space-between;
      }

      .detail-title {
          font-size: 18px;
          color: #262626;
          font-weight: 600;
      }

      .detail-msg {
          background: #ffffff;
          border-radius: 2px;
          height: 150px;
          padding: 16px 24px;
          display: flex;
      }

      .detail-name {
          display: flex;
          flex-direction: column;
          margin-left: 24px;
      }

      .avatar {
          margin: 9px 0;
          width: 60px;
      }

      .people-name {
          min-height: 50%;
          font-size: 24px;
          color: #1d2129;
          letter-spacing: 0;
          font-weight: 800;
          margin-right: 11px;
      }

      .department-title {
          font-size: 14px;
          color: #1d2129;
          letter-spacing: 0;
          font-weight: 800;
      }
      .title-tip {
          font-size: 14px;
          color: #1d2129;
          letter-spacing: 0;
      }
      .normal-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
          margin-right: 8px;
      }

      .weight-font {
          font-size: 20px;
          color: #262626;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 600;
      }

      .color-font {
          color: #3875ff;
      }

      .other {
          flex: 1;
          display: flex;
          flex-direction: column;
      }

      .other-top,
      .other-bottom {
          height: 50%;
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
          display: flex;
      }
      .other-bottom {
          position: relative;
          top: 10px;
      }

      .other-bottom span {
          bottom: 0;
      }

      .other-bottom-item,
      .other-top-item {
          flex: 1;
      }
      .other-bottom-item:first-child {
          flex: 1.2; /* 使第一个项目占用两倍于其他项目的空间 */
      }
      .other-bottom-item:last-child {
          flex: 1.2; /* 使第一个项目占用两倍于其他项目的空间 */
      }
      .unit-font {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 600;
      }

      .end-font {
          font-size: 20px;
          color: #6f6f6f;
          letter-spacing: 0;
          line-height: 28px;
          font-weight: 600;
      }

      :deep(.ant3-collapse-header) {
          padding: 0 !important;
          border: none !important;
      }

      :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
          padding: 0 !important;
      }

      :deep(.ant3-collapse-item) {
          margin-bottom: 8px;
      }

      :deep(.ant3-collapse-icon-position-right > .ant3-collapse-item > .ant3-collapse-header) {
          border-radius: 4px;
          color: #3875ff;
          border-color: #3875ff !important;
      }

      .expand {
          width: 30px;
          font-size: 14px;
          color: #3875ff;
          letter-spacing: 0;
          font-weight: 400;
          margin-right: 30px;
          line-height: 40px;
      }

      /*
  default-div平台、市场、交付-通用项目
  */
      .default-div,
      .template-div,
      .record-div,
      .correct-div,
      .action-div {
          margin-top: 16px;
          background: #ffffff;
          border-radius: 2px;
      }

      .record-div {
      }

      .correct-div {
      }

      .default-title,
      .template-title,
      .record-title,
      .correct-title,
      .action-title {
          padding: 13px 24px;
          background-image: linear-gradient(270deg, rgba(105, 173, 255, 0) 0%, rgba(56, 117, 255, 0.15) 100%);
          border-radius: 2px 2px 0 0;
          height: 48px;
          display: flex;
          line-height: 24px;
      }

      .default-content,
      .template-content {
          padding: 16px 24px;
      }

      .default-title-img {
          background-image: url('@/assets/images/9d2f172c48ba8fea7233514567490796.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }
      .no-title-img {
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .template-title-img {
          background-image: url('@/assets/images/324c18e84aed5386686ef288e3166bef.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }
      .no-template-title-img {
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .record-title-img {
          background-image: url('@/assets/images/ae2b2b6f4cd353f1a9f6ed8e411bad03.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .correct-title-img {
          background-image: url('@/assets/images/5f7efdcb05121b63c9d19506f01a50cb.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .action-title-img {
          background-image: url('@/assets/images/f404915fb146dc633d9e835870078f88.png');
          background-size: cover;
          width: 24px;
          height: 24px;
          margin-right: 16px;
      }

      .title-type {
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #3875ff;
          letter-spacing: 0;
          font-weight: 600;
          margin-right: 12px;
      }

      .title-workHour {
          margin-right: 16px;
      }

      .title-line {
          height: 14px;
          width: 1px;
          background-color: #595959;
          margin-right: 12px;
          margin-top: 6px;
      }

      .title-weight-font {
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
      }

      .title-normal-font {
          font-size: 14px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }

      .title-score {
          margin-right: 16px;
      }

      /*default-div平台、市场、交付-通用项目*/
      .content-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          display: grid;
          grid-template-columns: 1.3fr repeat(6, 1fr);
          /* 根据需要调整列数 */
      }

      .collapse-title {
          background: #fbfcff;
          border-radius: 4px;
          height: 40px;
          border: 1px solid #3875ff;
          width: 100%;
          display: grid;
          grid-template-columns: 1.3fr repeat(6, 1fr);
          /* 根据需要调整列数 */
      }

      .collapse-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .collapse-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .collapse-title div:nth-child(n + 2),
      .content-title div:nth-child(n + 2) {
          margin-right: 25px;
      }

      .collapse-title div:last-child {
          margin-right: 35px;
      }

      .content-title div:last-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-right: 35px;
      }

      .content-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .content-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      :deep(.ant3-collapse-borderless > .ant3-collapse-item) {
          border: none;
      }

      :deep(.ant3-collapse-content-box) {
          background-color: #fff !important;
      }

      .collapse-weight-font {
          font-size: 14px;
          color: #262626;
          letter-spacing: 0;
          font-weight: 600;
      }

      .too-long,
      .template-too-long,
      .action-too-long {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: inline-block;
          width: 210px;
      }

      .template-too-long {
          width: 300px;
      }

      .action-too-long {
          width: 250px;
      }

      .default-table {
          margin-top: 12px;
          margin-bottom: 12px;
      }

      .default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background: #f7f7f7;
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 600;
          color: #262626;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr:not(:last-child)
          > th {
          border-bottom: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th {
          border-right: 1px solid #d9d9d9;
      }

      /* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
      .default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
          border-left: none;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-thead
          > tr
          > th[colstart='0']:first-child {
          border-left: 1px solid #d9d9d9;
      }

      /* 开启粘性表头后，表格结构会发生变化 需另外处理 */
      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-header
          table {
          border-top: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          > .@{ant-prefix}-table-content
          > table {
          border-top: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table-thead)
          > tr
          > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
              .@{ant-prefix}-table-row-expand-icon-cell
          ):not([colspan])::before {
          background: #d9d9d9;
          width: 1px;
      }

      /*表格*/
      .default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #595959;
          border-bottom: 1px solid #d9d9d9;
          padding: 8px 16px;
          word-break: break-all;

          .cell-wrapper {
              padding: 0 16px;
          }
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td {
          border-right: 1px solid #d9d9d9;
      }

      .default-table
          :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
          .@{ant-prefix}-table-container
          .@{ant-prefix}-table-tbody
          tr
          > td:first-child {
          border-left: 1px solid #d9d9d9;
      }

      /*行动项任务*/
      /*default-div平台、市场、交付-通用项目*/
      .action-content-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          display: grid;
          grid-template-columns: 1.3fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .action-collapse-title {
          background: #fbfcff;
          border-radius: 4px;
          height: 40px;
          border: 1px solid #3875ff;
          width: 100%;
          display: grid;
          grid-template-columns: 1.3fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .action-collapse-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .action-collapse-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .action-content-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 16px;
      }

      .action-content-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      /*模板任务*/
      /*default-div平台、市场、交付-通用项目*/
      .template-content-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          display: grid;
          grid-template-columns: 2.1fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .template-collapse-title {
          background: #fbfcff;
          border-radius: 4px;
          height: 40px;
          border: 1px solid #3875ff;
          width: 100%;
          display: grid;
          grid-template-columns: 2.1fr repeat(5, 1fr);
          /* 根据需要调整列数 */
          gap: 10px;
          /* 根据需要调整间距 */
      }

      .template-collapse-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .template-collapse-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 48px;
      }

      .template-content-title div:first-child {
          justify-content: start;
          /* 水平居中对齐 */
          margin-left: 48px;
      }

      .template-content-title div {
          display: flex;
          align-items: center;
          justify-content: center;
          /* 水平居中对齐 */
      }

      .green-num,
      .red-num,
      .default-num {
          width: 50px;
          height: 20px;
          border-radius: 2px;
          line-height: 20px;
          margin: 0 auto;
      }

      .green-num {
          background: rgba(82, 196, 26, 0.1);
          border: 1px solid #52c41a;
          color: #52c41a;
      }

      .red-num {
          background: rgba(245, 34, 45, 0.1);
          border: 1px solid #f5222d;
          color: #f5222d;
      }

      .default-num {
          background: rgba(38, 38, 38, 0.1);
          border: 1px solid #bfbfbf;
          color: #262626;
      }

      :deep(.table-striped) td {
          background-color: #f8fafc;
      }

      .blue-font {
          color: #3875ff;
      }

      .red-font {
          color: #f5222d;
      }

      .green-font {
          color: #52c41a;
      }
      :deep(.ant3-select-selection-item) {
          max-width: 260px;
      }
      .tip {
          font-weight: 800;
      }
      .warn-score {
          color: red;
      }
      .good-score {
          color: #52c41a;
      }
      .normal-score {
          pointer-events: none; /* 禁止所有的鼠标和指针事件 */
          cursor: not-allowed; /* 鼠标指针显示为不允许的样式 */
      }
      .detail-top-title {
          display: flex;
          height: 30px;
          border-bottom: 1px solid #9bbaff;
      }
      .detail-first {
          font-family: PingFangSC-Regular;
          font-size: 16px;
          color: #262626;
          font-weight: 400;
      }
      .red-weight {
          font-size: 18px;
          color: #f5222d;
          font-weight: 600;
          margin-right: 24px;
      }
      .detail-second {
          font-size: 16px;
          color: #595959;
          letter-spacing: 0;
          font-weight: 400;
      }
      .litter {
          font-size: 16px;
      }
      .detail-item {
          border-left: 4px solid #3875ff;
          padding-left: 8px;
          margin-top: 15px;
          height: 16px;
          line-height: 16px;
          margin-bottom: 12px;
      }
      .user-img {
          width: 16px;
          height: 16px;
          display: inline-block;
          position: relative;
          top: 5px;
          cursor: pointer;
      }
      .disabled-div {
          background: rgba(38, 38, 38, 0.1);
          width: 100%;
      }
      .other-middle {
          height: 40px;
          background-color: #fef4d9;
          line-height: 40px;
          padding-left: 16px;
          color: #262626;
      }
      .short {
          height: 110px;
      }
      .behavior-div,
      .result-div {
          width: 130px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
</style>